<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2.DOM结构操作</title>
  <style>
    .container {
      border: 1px solid #ccc;
    }

    .red {
      color: red;
    }
  </style>
</head>

<body>
  <!-- DOM结构操作 -->
  1.新增、插入节点
  2.获取子元素，获取父元素
  3.删除子元素

  <div id="div1" class="container">
    <p id="p1">一段文字1</p>
    <p>一段文字2</p>
    <p>一段文字3</p>
  </div>
  <div id="div2" class="container">
    <img src="http://hbimg.huabanimg.com/3295eee156523d2aac54e36f0ff13b3a7e0d3a221a7c-joGTzz_fw658/format/webp" alt="">
  </div>

  <script>
    const div1 = document.getElementById('div1')
    const div2 = document.getElementById('div2')

    // 新建节点
    const newP =  document.createElement('p')
    newP.innerHTML = 'this is newP'
    // 插入节点
    div1.appendChild(newP)

    // 移动节点
    const p1 = document.getElementById('p1')
    div2.appendChild(p1)

    // 获取父节点
    console.log(p1.parentNode);

    // 获取子节点
    const div1ChildNodes = div1.childNodes
    console.log(div1ChildNodes);
    const div1ChildNodesP = Array.prototype.slice.call(div1ChildNodes).filter(item => {
      if (item.nodeType === 1) {
        return true
      }
      return false
    })
    console.log(div1ChildNodesP);

    // 删除子节点
    div1.removeChild(div1ChildNodesP[0])






    
  </script>

</body>

</html>